<template>
    <div class="color-picker-box">
        <div class="attr-item-label" v-text="config.labelName || '颜色'"/>
        <div class="block color-block" :style="`width: calc(100% - ${config.width}px);`">
            <el-input v-model="options.color" size="mini" :readonly="true"/>
            <el-color-picker
                class="yx-color-picker"
                v-model="options.color"
                show-alpha
                @change="colorChange"
                size="mini"
                :predefine="predefineColors">
            </el-color-picker>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'YXColorPicker',
        props: {
            options: {
                type: Object,
                default: _ => {
                    return {
                        color: 'rgba(248,89,89,1)'
                    };
                }
            },
            config: {
                type: Object,
                default: _ => {
                    return {
                        width: 43,
                        labelName: '颜色'
                    };
                }
            }
        },
        data() {
            return {
                predefineColors: [
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585',
                    'rgba(255, 69, 0, 0.68)',
                    'rgb(255, 120, 0)',
                    'hsv(51, 100, 98)',
                    'hsva(120, 40, 94, 0.5)',
                    'hsl(181, 100%, 37%)',
                    'hsla(209, 100%, 56%, 0.73)',
                    '#c7158577'
                ]
            };
        },
        methods: {
            colorChange(color) {
                this.options.color = color || '';
            }
        }
    }
</script>

<style scoped lang="scss">
    .color-picker-box {
        width: 100%;
        height: 38px;
        display: flex;
        justify-content: space-between;
        overflow: hidden;

        .attr-item-label {
            padding-right: 12px;
            line-height: 38px;
        }
        .block {
            line-height: 38px;
        }
        .color-block {
            position: relative;

            .yx-color-picker {
                position: absolute;
                top: 8px;
                right: 3px;
            }
        }
    }
</style>
<style lang="scss">
    .color-picker-box {
        .color-block {
            .el-color-picker--mini {
                height: 24px;
            }
            .el-color-picker__trigger {
                width: 24px;
                height: 24px;
                padding: 2px;
            }
        }
    }
</style>
